<!--
 * @Author: sunli
 * @Date: 2022-12-13 09:38:57
 * @LastEditors: sunli
 * @LastEditTime: 2023-05-30 16:46:34
 * @FilePath: /etrip-ui/src/pages/list/demo.vue
 * @Description: 展示组件-List 列表
-->
<template>
  <div class="listRefs">
    <div class="title" style="height: 100px">123</div>
      <List
         class="list"
        v-model:loading="list.loading"
        v-model:error="list.error"
        :finished="list.finished"
        @load="handlerLoad"
      >
        <Cell v-for="item in list.data" title="标题" :value="item.toString()"></Cell>
      </List>
  </div>
</template>

<script setup>
import List from '../../../packages/list/index.vue'
import Cell from '../../../packages/cell/index.vue'
import { onMounted, reactive } from 'vue'

const list = reactive({
  // 加载状态
  loading: false,
  // 是否加载完毕
  finished: false,
  // 加载错误
  error: false,
  data: 0
})
const handlerLoad = async () => {
  console.log('load事件')
  request()
}

const fetch = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(list.data + 5)
    }, 2000)
  })
}

const request = () => {
  fetch()
    .then((res) => {
      list.data = res

      list.loading = false
      if (list.data >= 30) {
        list.finished = true
      }
    })
    .catch(() => {
      list.loading = false
      list.error = true
    })
}

onMounted(() => {
  request()
})

</script>
<style scoped>
.title {
  position: fixed;
  width: 100%;
  top: 0;
}
.listRefs {
  overflow: auto;
  position: relative;
  width: 100%;
  top: 100px;
  bottom: 0;
}
</style>